const os = require("os")
const path = require("path")
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin")
// const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
// const { extendDefaultPlugins } = require("svgo");

// 获取cpu的核数
const threads = os.cpus().length;
console.log('cup核数' + threads);
// 封装样式loader
function getStyleLoader(pre) {
  return [
    MiniCssExtractPlugin.loader, // 将js中的css通过style标签添加html文件中
    "css-loader", // 将css资源编译成commonjs的模块到js中
    {
      loader: "postcss-loader",
      options: {
        postcssOptions:{
          plugins: [
            'postcss-preset-env'
          ]
        }
      }
    },
    pre
  ].filter(Boolean) // 顺序从右到左
}
module.exports = {
  // 入口
  entry: "./src/main.js", // 相对路径
  // 输出
  output: {
    // 输出路径 当前文件目录
    path: path.resolve(__dirname,"../dist"), // 绝对路径
    // 入口文件打包输出名称
    filename: "static/js/[name].js",
    // import导入的js打包命名
    chunkFilename: "static/js/[name].chunk.js",
    // 图片、字体等通过type:asset处理资源命名方式
    assetModuleFilename: "static/images/[hash:10][ext][query]",
    clean: true, // 清空上次打包结果
  },
  // 加载器
  module: {
    rules: [
      {
        oneOf: [
          // loader配置
          // css
          {
            test: /\.css$/, // 检测.css文件
            use: getStyleLoader()
          },
          // less
          {
            test: /\.less$/,
            // loader: 'xx'   只能使用一个loader
            // use: [] 可以使用多个loader
            use: getStyleLoader('less-loader')
          },
          // scss
          {
            test: /\.s[ac]ss$/i,
            use: getStyleLoader('sass-loader')
          },
          // styl
          {
            test: /\.styl$/,
            // 将 Stylus 文件编译为 CSS
            use: getStyleLoader('stylus-loader')
          },
          // png,jpg.gif,svg
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: 'asset',
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024 // 10kb
              }
            },
            // generator: {
            //   // hash:10 哈希取前10位
            //   filename: 'static/images/[hash:10][ext][query]'
            // }
          },
          // 字体文件
          {
            test: /\.(ttf|woff2?)$/,
            type: 'asset/resource',
            // generator: {
            //   // hash:10 哈希取前10位
            //   filename: 'static/fonts/[hash:10][ext][query]'
            // }
          },
          {
            test: /\.js$/,
            /**
             * 排除node_modules
             * 只包含include
             * exclude: /(node_modules|bower_components)/,
             * 两种方法只能用其中一种不可以同时使用
             * **/
            // 只处理src下的文件
            include: path.resolve(__dirname,'../src'),
            use: [
              // threads
              {
                loader: 'thread-loader',
                options: {
                  // 开启多进程
                  works: threads
                }
              },
              // babel
              {
                loader: 'babel-loader',
                options: {
                  cacheDirectory: true, // 开启babel缓存
                  cacheCompression: false , // 关闭缓存文件压缩
                  plugins: ["@babel/plugin-transform-runtime"]
                }
              }
            ]
          }
        ]
      }
    ]
  },
  // 插件
  plugins: [
    // 插件配置
    new ESLintPlugin({
      // 检测文件
      context: path.resolve(__dirname,"../src"),
      // 排除资源包文件
      exclude: 'node_modules',
      // 开启缓存
      cache: true,
      // 文件缓存的位置指定
      cacheLocation: path.resolve(__dirname,"../node_modules/.cache/eslintCache"),
      // 开启多进程
      threads,
    }),// eslint
    new HtmlWebpackPlugin({
      /**
       *  模板文件以次路径文件为模板
       *  结构与原来一直，自动引入打包资源
       */
      template: path.resolve(__dirname,"../public/index.html")
    }),
    // css兼容
    new MiniCssExtractPlugin({
      filename: 'static/css/[name].css',
      chunkFilename: 'static/css/[name].chunk.css'
    }),
    // 压缩图片
    // new ImageMinimizerPlugin({
    //   minimizerOptions: {
    //     // Lossless optimization with custom option
    //     // Feel free to experiment with options for better result for you
    //     plugins: [
    //       ["gifsicle", { interlaced: true }],
    //       ["jpegtran", { progressive: true }],
    //       ["optipng", { optimizationLevel: 5 }],
    //       // Svgo configuration here https://github.com/svg/svgo#configuration
    //       [
    //         "svgo",
    //         {
    //           plugins: extendDefaultPlugins([
    //             {
    //               name: "removeViewBox",
    //               active: false,
    //             },
    //             {
    //               name: "addAttributesToSVGElement",
    //               params: {
    //                 attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
    //               },
    //             },
    //           ]),
    //         },
    //       ],
    //     ],
    //   },
    // }),
  ],
  optimization: {
    // 压缩操作
    minimizer: [
      // css压缩
      new CssMinimizerPlugin(),
      // js压缩
      new TerserWebpackPlugin({
        parallel: threads
      }),
    ],
    // 代码分割
    splitChunks: {
      chunks: "all", // 对所有模块进行分割
    }
  },
  /**
   * 模式
   * 开发模式 development
   * 生产模式
   */
  mode: "production",
  // 生产模式不加会暴露代码
  // devtool: undefined
}